
import { observer } from 'mobx-react';
import ChartStore from '../../../stores/ChartStore';
import StatisticStore from '../../../stores/StatisticStore';
import './Statistic.scss';
import icons from '../../../images/chartImages';
import NoData from '../NoData';
import ChartsConfig from '../../../config/ChartsConfig';
import { OptionType } from '../../../models/ChartModels';
import { Charts } from '../Charts/Charts';
const StrategiesMap: any = {
    "sym_triangle_strategy": { icon: icons.sym_triangle_strategy, name: '对称三角形' },
    "ascending_triangle_strategy": { icon: icons.ascending_triangle_strategy, name: '上升三角形' },
    "descending_triangle_strategy": { icon: icons.descending_triangle_strategy, name: '下降三角形' },
    "flags_strategy": { icon: icons.flags_strategy, name: '通道' },
    "engulfing_pattern": { icon: icons.flags_strategy, name: '吞噬模式' },
    "shooting_star": { icon: icons.flags_strategy, name: '射击之星' },
    "hanging_man": { icon: icons.flags_strategy, name: '上吊线' },
    "inverted_hammer": { icon: icons.flags_strategy, name: '倒锤头' },
    "evening_star": { icon: icons.evening_star, name: '暮星' },
    "hammer": { icon: icons.flags_strategy, name: '锤头' },
    "dark_cloud_cover": { icon: icons.flags_strategy, name: '乌云压顶' },
    "morning_star": { icon: icons.morning_star, name: '晨星' },
    "three_black_crows": { icon: icons.three_black_crow, name: '三只乌鸦' },
    "three_advancing_white_soldiers": { icon: icons.three_white_soldiers, name: '白色三兵' },
}

const lineList: string[] = ['sym_triangle_strategy', 'ascending_triangle_strategy', 'descending_triangle_strategy', 'flags_strategy'];

export const LineData = observer(() => {
    return (
        <div className="LineDataWrapper">
      <Charts />

            {StatisticStore.strategies.length === 0 ?
                <NoData />
                : <div> <div className="tabTitle">
                    <div className="kline">技术图形 <span className='beta'>beta</span></div>
                    <div className="date">日期</div>
                </div>
                    <ul className="list">
                        {StatisticStore.strategies.map((e, i) => {
                            var strategy = StrategiesMap[e.strategy_name] || {};
                            return <li key={i} className="item" style={{ backgroundColor: ChartStore.lineId === i ? "#282828" : "transparent" }}
                                onClick={() => {
                                    window.scrollTo(0, 0);
                                    if (lineList.indexOf(e.strategy_name) > -1) {

                                        ChartsConfig.seriesType = 'line';
                                        ChartStore.onTypePicked(3, icons.series_line, OptionType.seriesLine);
                                    } else {

                                        ChartsConfig.seriesType = 'candlestick';
                                        ChartStore.onTypePicked(3, icons.series_candlestick, OptionType.seriesCandlestick);
                                    }
                                    ChartStore.addAnnotation(e, i);
                                }}
                            >
                                <div className="icon">
                                    <img src={strategy['icon']} alt=''></img>
                                </div>
                                <div className="title">{strategy['name']}</div>
                                <div className="date">{`${e.begin_date.replace(/-/g, '/')}-${e.end_date.replace(/-/g, '/')}`}</div>
                            </li>
                        })}

                    </ul></div>}
        </div>
    );
});